<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 商城管理 <span class="c-gray en">&gt;</span> 订单管理</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="cl pd-20">
			<div class="text-c">
				订单状态: <span class="select-box inline">
				<select class="select" id="orderPayState">
					<option value="">查询所有</option>
					<option value="STAY_PAYMENT">待支付</option>
					<option value="FINISH_PAYMENT">待发货</option>
					<option value="FINISH_COURIER">已发货</option>
					<option value="FINISH">已完成</option>
					<option value="REFUND">退换</option>
				</select></span>
					<a href="javascript:;" class="btn btn-success" v-on:click="search()"><i class="Hui-iconfont">&#xe709;</i> 查询</a>
			</div>
			<div class="mt-20">
				<table class="table table-border table-bordered table-bg">
					<thead>
						<tr><th colspan="13" scope="col">&nbsp;</th></tr>
						<tr class="text-c">
							<th>订单号</th>
              <th>BANNER</th>
							<th>商品名称</th>
              <th>支付金额</th>
              <th>订单状态</th>
              <th>收货人</th>
							<th>收货人电话</th>
							<th>收货人地址</th>
							<th>快递公司</th>
							<th>快递号</th>
              <th>购买备注</th>
              <th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
            <tr class="text-c" v-for="row in result.content">
							<td>{{row.orderId}}</td>
              <td title="{{row.goodsIntroductionVo.banner}}">
									<img v-bind:src="row.goodsIntroductionVo.banner" width="30" height="30" onerror="this.src='http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png'"/>
							</td>
              <td>{{row.goodsIntroductionVo.goodsName}}</td>
              <td>{{row.payAmount / 100}}</td>
              <td style="color:blue">{{row.orderStateDesc}}</td>
              <td>{{row.buyerAddress.takeUserName}}</td>
							<td>{{row.buyerAddress.takeUserPhone}}</td>
							<td>{{row.buyerAddress.province}}&nbsp;{{row.buyerAddress.city}}&nbsp;{{row.buyerAddress.district}}&nbsp;{{row.buyerAddress.detailedAddress}}</td>
							<td>{{row.orderLogistics.logisticsCompany}}</td>
							<td>{{row.orderLogistics.logisticsNumber}}</td>
							<td style="color:red">{{row.buyerMessage}}</td>
              <td>{{row.createTime | formatDate}}</td>
							<td v-if="row.orderState =='FINISH_PAYMENT'">
								<a href="#!view/shopping/order/order-fcourier.html?id={{row.id}}"><i class="Hui-iconfont">&#xe62e;</i>发货</a>
							</td>
              <td v-else>
                  ——
              </td>
						</tr>
					</tbody>
				</table>
				<div class="cl pd-5 bg-1 bk-gray mt-20">
	          <span class="l">当前显示{{currentPageNumber}}/{{totalPage}}页,共{{totalSize}}条记录</span>
						<div id="Pagination" class="pagination r"/>
	      </div>
			</div>
		</article>
	</div>
<script>
      new Vue({
          el:'#sectionContent',
          http: authorization(),
          data:{
              result:{},
              pageSize:10,
              totalPage:1,
              totalSize:0,
              currentPageNumber:1
          },
          created:function(){
              this.search();
          },
          methods:{
              deleteData:function(goodsId){
                  if(!confirm("你确认删除数据吗？")){
                      return;
                  }
                  this.$http.delete('/restful/shopping/v1.0/order?goodsId='+goodsId).then((response) => {
                      this.search();
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              },
              pageselectCallback:function(currentPage){
                  if(currentPage == -1){
                      return true;
                  }
                  this.loadGrid(currentPage + 1,false);
                  return false;
              },
              search:function(){
                  this.loadGrid(1,true);
                  return;
              },
              loadGrid:function(pageNum,pagination){
                  this.currentPageNumber = pageNum;
                  this.$http.get('/restful/shopping/v1.0/order/'+this.currentPageNumber+'/'+this.pageSize+"?orderPayState="+$('#orderPayState option:selected').val()).then((response) => {
                      var content = responseObj(response).data;
                      this.result = content;
                      this.totalPage = content.totalPage;
                      this.totalSize = content.totalSize;
											if(pagination){
                            $("#Pagination").pagination(this.totalSize, {
                                current_page: -1,//当前选中的页面
                                num_edge_entries: 2, //两侧显示的首尾分页的条目数
                                num_display_entries: 5, //主体页数
                                link_to: 'javascript:void(0);',
                                items_per_page: this.pageSize,//每页显示数量
                                callback: this.pageselectCallback,
                                prev_text:'上一页',
                                next_text:'下一页'
                            });
                        }
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              }
          },
          filters: {
              formatDate:function(time) {
                  return new Date(time).format("yyyy-MM-dd hh:mm:ss");
              }
          }
      });
  </script>
